 <template>
  <div class="type">
    <div class="search">
      <div class="search-box">
        <i class="iconfont icon-sousuo"></i>
        <router-link to="">搜索鲜花、蛋糕、礼品</router-link>
      </div>
    </div>
    <div class="main">
      <div class="main-aside">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1">热门推荐</mt-tab-item>
          <mt-tab-item id="2">鲜花</mt-tab-item>
          <mt-tab-item id="3">永生花</mt-tab-item>
          <mt-tab-item id="4">蛋糕</mt-tab-item>
          <mt-tab-item id="5">特色礼品</mt-tab-item>
          <mt-tab-item id="6">礼篮</mt-tab-item>
          <mt-tab-item id="7">绿植花卉</mt-tab-item>
        </mt-navbar>
      </div>
      <!-- tab-container -->
      <div class="main-content">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
          
          <flowerP :flower="flowerpic.pic1" ></flowerP>
            <alllist :all="all"></alllist>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <flowerP :flower="flowerpic.pic2"></flowerP>
              <alllist :all="alls" :type="type[0]" :rank="rank[1]"></alllist>
              <alllist :all="alls1" :type="type[1]"></alllist>
              <alllist :all="alls3" :type="type[2]"></alllist>
              <alllist :all="alls4" :type="type[3]"></alllist>
              <price :price="price" :type="type[8]"></price>
              <price :price="bound" :type="type[9]"></price>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <flowerP :flower="flowerpic.pic3"></flowerP>
             <alllist :all="alls" :type="type[0]" :rank="rank[0]"></alllist>
            <alllist :all="alls1" :type="type[5]"></alllist>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <flowerP :flower="flowerpic.pic4"></flowerP>
            <brand :brand="brand" :type="type[10]"></brand>
          </mt-tab-container-item>
          <mt-tab-container-item id="5">
            <flowerP :flower="flowerpic.pic5"></flowerP>
             <brand :brand="brand2" :type="type[10]"></brand>
             <alllist :all="alls4" :type="type[0]"></alllist>
             <alllist :all="alls1" :type="type[5]"></alllist>
          </mt-tab-container-item>
          <mt-tab-container-item id="6">
            <flowerP :flower="flowerpic.pic6"></flowerP>
            <alllist :all="hamper" :type="type[7]"></alllist>
          </mt-tab-container-item>
          <mt-tab-container-item id="7">
            <flowerP :flower="flowerpic.pic7"></flowerP>
            <alllist :all="plant" :type="type[6]"></alllist>
          </mt-tab-container-item>

        </mt-tab-container>
      </div>
    </div>
  </div>
</template>

<style scoped>
.type {
  overflow: hidden;
  position: relative;
}
div {
  font-size: 1rem;
}
a {
  text-decoration: none;
}
.main {
  margin-top: 3.14rem;
  padding: 0.85rem;
  display: flex;
}
.search {
  width: 100%;
  height: 3.14rem;
  position: fixed;
  border-bottom: 2px solid #f1f3f6;
  background: white;
  z-index: 99;
}
.search-box {
  margin: 0.28rem 0.85rem;
  background-color: #f3f5f7;
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem;
}
.search-box i {
  display: block;
  color: rgb(170, 169, 169);
  width: 10%;
  font-size: 1.42rem;
}
.search-box a {
  display: block;
  width: 90%;
  color: #71797f;
  height: 2.57rem;
  line-height: 2.57rem;
}

.main-aside {
  width: 22%;
  height: 100%;
}
.main-content {
  width: 78%;
  padding-bottom: 3.14rem;
}
.mint-navbar {
  width: 20%;
  background: white;
  position: fixed;
  left: 0;
  top: 3.14rem;
  border-right: 1px solid #e9ecf0;
}

.mint-tab-item {
  display: block;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-size: 14px;
}
.is-selected {
  color: #ff734c;
  position: relative;
}
.is-selected:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2.3rem;
  background: #ff734c;
  top: 20%;
  left: 0;
}
</style>
<script>
import flowerP from '../common/flowerpic.vue';
import alllist from '../common/alllist';
import price from '../common/price';
import brand from '../common/brand'
export default {
  components:{
    flowerP,
    alllist,
    price,
    brand
  },
  data () {
    return {
      selected: '1',
      flowerpic:{},
      all:[],
      type:[],
      rank:[],
      alls:[],
      alls1:[],
      alls4:[],
      alls3:[],
      price:[],
      bound:[],
      brand:{},
       brand2:{},
       hamper:[],
       plant:[]
    }  
  },
  mounted(){
      this.$http.get('./data/type.json').then(res=>{
        this.flowerpic=res.data.flowerpic;
        this.all=res.data.allf;
        this.alls=res.data.allf2;
        this.alls1=res.data.allf1;
        this.type=res.data.typelist;
        this.rank=res.data.rank;
        this.alls4=res.data.allf4;
        this.alls3=res.data.allf3;
        this.price=res.data.price;
        this.bound=res.data.bound;
        this.brand=res.data.brand;
        this.brand2=res.data.brand2;
        this.hamper=res.data.hamper;
        this.plant=res.data.plant;
      })
  }
}
</script>